<template>
  <div class="home">
    <el-col class="left">
      <el-menu :default-active="typeDefaultActive" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
               background-color="#333744" :style="{width:mainNav+'px'}"
               text-color="#fff" :collapse="isCollapse">
        <div class="hideSidebar" @click="toggleCollapse" v-show="isCollapse">
          <div></div>
        </div>
        <div class="showSidebar" @click="toggleCollapse" v-show="!isCollapse">
          <div></div>
        </div>
        <el-menu-item v-for="(item,index) in navList" :key="index" :index="item.url"
                      @click="getType(item.enName,item.name,index)">
          <i :class="item.icon"></i>
          <span slot="title">{{item.name}}</span>
        </el-menu-item>
      </el-menu>
    </el-col>
    <div class="right">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
  import { mapGetters, mapActions } from 'vuex'

  export default {
    name: 'Home',
    data () {
      return {
        typeDefaultActive: '',
        isCollapse: false,
        mainNav: 240,
      }
    },
    created () {
      this.initMenu()
    },
    computed: {
      ...mapGetters([
        'type',
        'navList'
      ])
    },
    watch: {
      '$route' (to, from) {
        this.$nextTick(() => {
          this.initMenu()
        })
      }
    },
    methods: {
      ...mapActions([
        'setType',
      ]),
      initMenu () {   //导航栏选中样式
        if (this.$route.path.indexOf('college') !== -1) {
          this.typeDefaultActive = 'college'
        } else {
          this.typeDefaultActive = this.$route.name
        }
      },
      handleOpen (key, keyPath) {
        console.log(key, keyPath)
      },
      handleClose (key, keyPath) {
        console.log(key, keyPath)
      },
      toggleCollapse () {//侧边栏宽度
        console.log(this.isCollapse)
        this.isCollapse = !this.isCollapse
        if (this.isCollapse) {
          this.mainNav = 64
        } else {
          this.mainNav = 240
        }
      },
      getType (enName, name, defaultIndex) {
        this.setType({name, enName})
        this.$router.push({name: enName})
      },
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="stylus" type="text/stylus">
  .home
    display flex
    position absolute
    height 100%
    width 100%
    .left
      height 100%
      width auto
    .right
      flex 1

  .el-menu-item
    font-size 16px

  .showSidebar
    display flex
    height 40px
    align-items center
    justify-content center
    background #4a5064
    cursor pointer
    > div
      height 15px
      width 21px
      background: linear-gradient(to right, /* 或 90deg */ #333744 50%, #ccc 0);
      background-size: 8px 100%;
    &:hover
      > div
        background: linear-gradient(to right, /* 或 90deg */ #333744 50%, #fff 0);
        background-size: 8px 100%;

  .hideSidebar
    display flex
    height 40px
    width 64px
    align-items center
    justify-content center
    background #4a5064
    cursor pointer
    > div
      height 15px
      width 21px
      background: linear-gradient(to right, /* 或 90deg */ #333744 50%, #ccc 0);
      background-size: 7px 100%;
      transform rotate(90deg)
    &:hover
      > div
        background: linear-gradient(to right, /* 或 90deg */ #333744 50%, #fff 0);
        background-size: 7px 100%;

  .el-table
  .el-pagination button, .el-pagination span:not([class*=suffix])
    font-size 16px

  .el-menu
    border-right none
    height 100%

  .el-menu-item.is-active
    background-color #fff

  .table-toolbar
    margin 10px 0
    text-align right

  .router-link-active
    text-decoration none
    color #409EFF

</style>
